<!DOCTYPE html>
<html lang="en">

<head>

<!-- AdThrive Head Tag Manual -->
<script data-no-optimize="1" data-cfasync="false">
(function(w, d) {
	w.adthrive = w.adthrive || {};
	w.adthrive.cmd = w.
	adthrive.cmd || [];
	w.adthrive.plugin = 'adthrive-ads-manual';
	w.adthrive.host = 'ads.adthrive.com';var s = d.createElement('script');
	s.async = true;
	s.referrerpolicy='no-referrer-when-downgrade';
	s.src = 'https://' + w.adthrive.host + '/sites/643436a4e6d20859e40a446b/ads.min.js?referrer=' + w.encodeURIComponent(w.location.href) + '&cb=' + (Math.floor(Math.random() * 100) + 1);
	var n = d.getElementsByTagName('script')[0];
	n.parentNode.insertBefore(s, n);
})(window, document);
</script>
<!-- End of AdThrive Head Tag -->





  <!-- Global site tag (gtag.js) - Google Analytics -->



  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-79254642-6"></script>

  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'UA-79254642-6');
  </script>
  <script>
    var getOutboundLink = function (url) {
      gtag('event', 'click', {
        'event_category': 'outbound',
        'event_label': url,
        'transport_type': 'beacon',
        'event_callback': function () { document.location = url; }
      });
    }
  </script>

  <meta charset="utf-8">
  <title>Javascript and Frontend glossary</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description"
    content="A list of keywords related with frontend web development and javascript, with human readable explanations and small code snippets">
  <meta name="keywords" content="web, development, programing, glossary, vocabulary, list, javascript, beginner">
  <meta name="author" content="Yan Holtz">
  <link rel="icon" href="img/logo/D3_single_small.png">

  <meta property="og:title" content="Javascript and Frontend glossary.">
  <meta property="og:image" content="img/overview_RGG.png">
  <meta property="og:description"
    content="A list of keywords related with frontend web development and javascript, with human readable explanations and small code snippets.">

  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom fonts for this template -->
  <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

  <!-- Custom styles for this template -->
  <link href="css/agency.css" rel="stylesheet">

  <!-- PRISM -->
  <script src="LIB/prism.js"></script>
  <link href="LIB/prism.css" rel="stylesheet" />

  <!-- JQUERY -->
  <script src="vendor/jquery/jquery.min.js"></script>

  <!-- HTML TO CANVAS -->
  <script src="js/html2canvas.js"></script>

  <!-- Function to parse html and js code chunks made by Yan Holtz -->
  <script src="js/myParser.js"></script>

  <!-- Bootstrap js -->
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="js/agency.min.js"></script>

</head>



<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">


  <!-- THIS ALLOWS TO INSERT THE MENU THAT IS STORED IN A MENU.HTML FILE-->
  <nav class="navbar navbar-expand-lg fixed-top" id="mainNav"></nav>
  <script>
    $(function () {
      $("#mainNav").load("html_chunk/menu.html");
    });
  </script>

  <!-- THIS ALLOWS TO INSERT THE MODAL OF THE MENU THAT IS STORED IN A MENU_MODAL.HTML FILE-->
  <div id="modal_menu_insertion"> </div>
  <script>
    $(function () {
      $("#modal_menu_insertion").load("html_chunk/menu_modal.html");
    });
  </script>



  <!-- Header -->
  <header class="masthead" style="padding-top: 150px; padding-bottom: 80px">
    <div class="textlanding">
      <h1>Javascript and Frontend glossary</h1>
      <hr class="short_hr">
      <br>
      <ul class="list-inline social-buttons">
        <li class="list-inline-item">
          <a href="https://twitter.com/R_Graph_Gallery">
            <i class="fa fa-twitter"></i>
          </a>
        </li>
        <li class="list-inline-item social-buttons">
          <a href="https://github.com/holtzy">
            <i class="fa fa-github" style="color: white"></i>
          </a>
        </li>
        <li class="list-inline-item social-buttons">
          <a href="https://www.linkedin.com/in/yan-holtz-2477534a/">
            <i class="fa fa-linkedin"></i>
          </a>
        </li>
      </ul>
      <br><br>
      <p style="max-width: 700px; margin: auto">This document is a list of keywords you will frequently hear when
        working in the world of web development and Javascript. Please consider it as a note to myself: I like storing
        the main concepts I learn here, and hope it can be useful to you too!</p>
    </div>
  </header>




  <!--
  <nav class="col-sm-3 col-4" id="myScrollspy">
    <ul class="nav nav-pills flex-column" id="tableOfContent">
    </ul>
  </nav> -->


  <!-- initialize the TABLE of CONTENT (will be dynamically filled later -->
  <div>
    <div
      style="line-height: .8; margin-left: 30px; position: fixed; top: 20%; height: 60%; width:260px; overflow: scroll; font-size: 0.8rem;">
      <nav id="myScrollspy">
        <ul class="nav nav-pills flex-column" id="tableOfContent" style="position: static;">
        </ul>
      </nav>
    </div>
  </div>



  <!-- Lets make the container thiner for this specific page -->
  <style>
    .container {
      max-width: 740px;
    }

    section {
      padding: 60px 0;
    }
  </style>

  <section id="anonymous-function">
    <div class="container">
      <h1>Anonymous function</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1
function(toto){ 1+1} // comment</code></pre>
    </div>
  </section>

  <section id="asynchronous">
    <div class="container">
      <h1>Asynchronous</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1
function(toto){ 1+1} // comment</code></pre>
    </div>
  </section>

  <section id="callback">
    <div class="container">
      <h1>Callback</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1
function(toto){ 1+1} // comment</code></pre>
    </div>
  </section>

  <section id="class">
    <div class="container">
      <h1>Class</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1
function(toto){ 1+1} // comment</code></pre>
    </div>
  </section>

  <section id="closure">
    <div class="container">
      <h1>Closure</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1
function(toto){ 1+1} // comment</code></pre>
    </div>
  </section>

  <section id="constructor">
    <div class="container">
      <h1>Constructor</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1
function(toto){ 1+1} // comment</code></pre>
    </div>
  </section>

  <section id="CSS-selector">
    <div class="container">
      <h1>CSS selector combination</h1>
      <hr>
      <p>A CSS selector allows to select a specific part of the DOM to give it some style. For instance, make the
        background red for the class called "classA"</p>
      <pre class="language-css"><code>.classA {
  background-color: red;
}</code></pre>
      <p>You can do the same with ids (<code>#classA</code>)or with html elements ( <code>p</code> or <code>h1</code> ).
      </p>
      <p>It is also possible to combine selectors and I always forget how it works</p>
      <ul>
        <li>Grouping: <code>.class1, .class2, .class3 { ... }</code> select those 3 classes.</li>
        <li>Descendant: <code>.class1 .class2 {...}</code> select class2 when it is inside a class1.</li>
        <li>Adjacent sibling: <code>.class1 + .class2</code> select class2 when it comes right after class1 at the same
          level.</li>
        <li>General sibling: <code>.class1 ~ .class2</code> select class2 when at the same level than class1</li>
        <li>Child: <code>.class1 > .class2</code> select class2 when it comes right after class1 as a children.</li>
      </ul>
      <p>See more in this <a href="https://gist.github.com/magicznyleszek/809a69dd05e1d5f12d01">Cheatsheet</a>.</p>
      <!-- Playground
      <div class="toto">
        <p class="titi">tititititititti</p>
      </div>
      <p class="titi">tititititititti</p>
      <style>
        .toto~.titi {
          background-color: red;
        }
      </style> -->
  </section>

  <section id="currying">
    <div class="container">
      <h1>Currying</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1
function(toto){ 1+1} // comment</code></pre>
    </div>
  </section>

  <section id="declarative-vs-imperative">
    <div class="container">
      <h1>Declarative vs Imperative code</h1>
      <hr>
      <p><b>Imperative</b> code: spell out each step of how you want something done. Like do a for loop. Say the how.
        More verbose / low level.</p>
      <p><b>Declarative</b> code: say what it is that you want done. Like use an array method like <code>every.</code>.
        Say the what. More Concise / high level.</p>
      <pre class="language-javascript"><code>const toto = 1 + 1
function(toto){ 1+1} // comment</code></pre>
    </div>
  </section>

  <section id="destructuring">
    <div class="container">
      <h1>Destructuring</h1>
      <hr>
      <p>A js expression that allows to unpack values from arrays or properties from objects into distinct variables. <a
          href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Full
          reference</a>
      </p>
      <pre class="language-javascript"><code>// destructuring an array:
const [a, b] = [10, 20]
console.log(b) // 20

// destructuring an object:
const obj = { c: 3, d: 4, e: 89 }
const { c, d } = obj
console.log(d) // 4</code></pre>
      <p>Note that you can also rename directly</p>
      <pre class="language-javascript"><code>const otherObj = {f: 78, g: 12};
const {f: newNameForF, g: newNameForG} = otherObj;
console.log(newNameForF); // 78 </code></pre>
    </div>
  </section>

  <section id="DNS">
    <div class="container">
      <h1>DNS</h1>
      <hr>
      <p>DNS stands for <code>Domain Name System</code>, often compared to the "phonebook of internet". Basically, we
        reach a website thanks to its domain name (like <a
          href="https://www.d3-graph-gallery.com">d3-graph-gallery.com</a>). But browsers work with IP adresses (like
        <code>192.168.1.1</code>). DNS does the translation from domain name to <a href="#IP">IP</a>.</p>
    </div>
  </section>


  <section id="DOM">
    <div class="container">
      <h1>DOM</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1
function(toto){ 1+1} // comment</code></pre>
    </div>
  </section>

  <section id="headless">
    <div class="container">
      <h1>Headless UI library or component</h1>
      <hr>
      <p>Headless user interface components separate the logic & behavior of a component
        from its visual representation. For instance, <a href="">React-table</a> provides a set of
        usefull functions to create tables, but does not render it for you.
      </p>
      <pre class="language-javascript"><code>const toto = 1 + 1</code></pre>
    </div>
  </section>

  <section id="hoisting">
    <div class="container">
      <h1>Hoisting</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1</code></pre>
    </div>
  </section>

  <section id="IP">
    <div class="container">
      <h1>IP adress</h1>
      <hr>
      <p>IP stands for <code>Internet Protocol</code>. The IP adress is a unique number attributed to your device, used
        to exchange information on the web through protocols. Think of this IP address as your computer’s street
        address.</p>
      <p>Every website has an IP adress. The <a href="#DNS">DNS</a> makes the link between the IP adress and the website
        domain name.</p>
      <p>Most common type of IP is IPv4 (version 4). It looks like <code>192.168.5.50</code>. 4 numbers separated by
        dots, each ranging from 0 to 255. At some points the number of available IPv4 was not enough, so IPv6 was
        created to handle more adresses.</p>
    </div>
  </section>

  <section id="payload">
    <div class="container">
      <h1>Payload</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1</code></pre>
    </div>
  </section>

  <section id="pure-function">
    <div class="container">
      <h1>Pure function</h1>
      <hr>
      <p>A function can do mapping (take an input, returns an output) or procedures (interact with other stuff). Pure
        function are
        always about mapping. For each set of input, there is an output. For instance, <code>Math.max()</code> is a pure
        function.
      </p>
      <p>A pure function:</p>
      <ul>
        <li>does not have any <b>side effect</b>. It can’t alter any external state.</li>
        <li>given the same input, returns the same output.</li>
      </ul>
      <p>If it makes sense to call a function without using its output, the function is NOT pure.</p>
      <p>Pure functions form the fundation of functionnal programming</p>
      <p>Be careful about <b>Immutability</b>:</p>
      <p>Common mistake is to mutate on of the argument that is passed to the function. Since the object is mutated,
        some side effects can happen. The function is thus impure. Example:</p>
      <pre class="language-javascript"><code>
        const addToCart = (cart, item, quantity) => {
        cart.items.push({
          item,
          quantity
        });
        return cart;
      };
    </code></pre>
    </div>
  </section>

  <section id="promises">
    <div class="container">
      <h1>Prototype</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1</code></pre>
    </div>
  </section>

  <section id="prop-drilling">
    <div class="container">
      <h1>Prop drilling</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1</code></pre>
    </div>
  </section>

  <section id="prototype">
    <div class="container">
      <h1>Prototype</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1</code></pre>
    </div>
  </section>

  <section id="prototypal-inheritance">
    <div class="container">
      <h1>Prototypal inheritance</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1</code></pre>
    </div>
  </section>

  <section id="proxy">
    <div class="container">
      <h1>Proxy server</h1>
      <hr>
      <p>A proxy server acts as a gateway between you and the internet. It’s an intermediary server separating end users
        from the websites they browse.</p>
      <p>They do not just pass the data from and to the website. They are also involved in security and performance.</p>
    </div>
  </section>

  <section id="recursion">
    <div class="container">
      <h1>Recursion</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1</code></pre>
    </div>
  </section>

  <section id="scope">
    <div class="container">
      <h1>Scope</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1</code></pre>
    </div>
  </section>

  <section id="spread">
    <div class="container">
      <h1>Spread syntax <code>...</code></h1>
      <hr>
      <p>The spread syntax allows to merge or clone object and concatenate arrays. <a
          href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">Full
          reference</a></p>
      <p><code>&rarr; Merge</code>: Note that if a property exists in
        several objects, its final value
        will be the last observed:</p>
      <pre class="language-javascript"><code>const obj1 = { a: 1, b: 2 }
const obj2 = { a: 1, b: 4 }
console.log({ ...obj1, ...obj2 }) // { a: 1, b: 4 }</code></pre>
      <p><code>&rarr; Clone</code>: shallow cloning here.</p>
      <pre class="language-javascript"><code>let obj = { a: 2 };
let clone = { ...obj };</code></pre>
      <p><code>&rarr; Concatenate</code>: For arrays</p>
      <pre class="language-javascript"><code>let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
let concatArray = [...arr1, ...arr2];
console.log(concatArray) // [0, 1, 2, 3, 4, 5]</code></pre>
    </div>
  </section>


  <section id="ternary-operator">
    <div class="container">
      <h1>Ternary operator</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1</code></pre>
    </div>
  </section>

  <section id="truthy-and-falsy">
    <div class="container">
      <h1>Truthy and Falsy</h1>
      <hr>
      <p>Some text to give explananations</p>
      <pre class="language-javascript"><code>const toto = 1 + 1</code></pre>
    </div>
  </section>


  <section id="VPN">
    <div class="container">
      <h1>VPN</h1>
      <hr>
      <p>VPN stands for <code>Virtual Private Network</code>.</p>
      <pre class="language-javascript"><code>const toto = 1 + 1</code></pre>
    </div>
  </section>

  <!-- Build the left hand side summary -->
  <script>
    const upperCaseFirst = (str) =>
      str.charAt(0).toUpperCase() + str.substring(1);

    const allItems = document.getElementsByTagName("section")
    const ul = document.getElementById("tableOfContent");

    for (i = 0; i < allItems.length; i++) {
      id = allItems[i].id

      // create an item in the table of content
      li = document.createElement("li");
      li.classList.add("nav-item");

      // create a link
      itemLink = document.createElement('a');
      itemLink.setAttribute('class', 'nav-link');
      itemLink.setAttribute('href', '#' + id);
      let linkText = document.createTextNode(upperCaseFirst(id.replace("-", " ")));
      itemLink.appendChild(linkText);

      // Add link to item, and item to the list
      li.appendChild(itemLink);
      ul.appendChild(li);
    }

  </script>









<!-- ============================ CONTACT SECTION ============================ -->
  <section id="contact" class="bg" style="background-color: white"></section>

  <!-- THIS ALLOWS TO INSERT THE CONTACT CHUNK THAT IS STORED IN A CONTACT.HTML FILE-->
  <script>
    $(function () {
      $("#contact").load("html_chunk/contact.html");
    });
  </script>



<!-- ============================ FOOTER SECTION ============================ -->  <footer class="bg-light" id="myFooter"></footer>

  <!-- THIS ALLOWS TO INSERT THE FOOTER THAT IS STORED IN A FOOTER.HTML FILE-->
  <script>
    $(function () {
      $("#myFooter").load("html_chunk/footer.html");
    });
  </script>

  <!-- ============================ -->

</body>

</html>
